<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.kuang {
				text-align: center;
				margin-top: 200px;
			}

			#mess {
				text-align: center
			}

			.value {
				width: 200px;
				height: 200px;
				border: 1px solid;
				text-align: center;
				line-height: 200px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="mess">正在连接...</div>
		<div class="kuang">
			<input value="" id="value1" />
			<button onclick="send" id="send">发送</button>
		</div>

		<script>
			var mess = document.getElementById("mess");
			if (window.WebSocket) {
				var ws = new WebSocket('ws://localhost:3000');

				ws.onopen = function(e) {
					console.log("连接服务器成功");
					ws.send("用户一连接成功");
					document.querySelector("#send").onclick = function(e) {
						var time = new Date();
						let val = document.getElementById("value1");
						ws.send(`${val.value}`);
					}
				}
				ws.onclose = function(e) {
					console.log("服务器关闭");
				}
				ws.onerror = function() {
					console.log("连接出错");
				}

				ws.onmessage = function(e) {
					mess.innerHTML = "连接成功"
				}
			}
		</script>
	</body>
</html>
